<template>
  <div class="dashboard-container">
    <!-- 头部 -->
    <!-- 分栏布局 -->
    <el-row :gutter="10">
      <!-- 第一栏 -->
      <el-col :span="6">
        <nav-card title="销售总额" count="￥ 88888">
          <template slot="show">
            <div nav-show>
              <span>周同比56.67%<svg t="1661006650668" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5590" width="16" height="16"><path d="M698.7 480.9v429.5c0 54.8-44.5 99.3-99.3 99.3H434c-54.8 0-99.3-44.5-99.3-99.3V480.9H70l446.9-463 446.9 463H698.7z m0 0" fill="#1afa29" p-id="5591" /></svg></span>
              <span>日同比19.96%<svg t="1661006988962" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6655" width="16" height="16"><path d="M335 546.6V117.1c0-54.8 44.5-99.3 99.3-99.3h165.4c54.8 0 99.3 44.5 99.3 99.3v429.5h264.7l-446.9 463L70 546.6h265z m0 0" fill="#d81e06" p-id="6656" data-spm-anchor-id="a313x.7781069.0.i22" class="selected" /></svg></span>
            </div>
          </template>
          <template slot="hide">
            <div>日销售额￥ 88888</div>
          </template>
        </nav-card>
      </el-col>
      <!-- 第二栏 -->
      <el-col :span="6">
        <nav-card title="销售总额" count="￥ 88888">
          <template slot="show">
            <div nav-show>
              <line-chart />
            </div>
          </template>
          <template slot="hide">
            <div>日销售额￥ 88888</div>
          </template>
        </nav-card>
      </el-col>
      <!-- 第三栏 -->
      <el-col :span="6">
        <nav-card title="支付笔数" count="￥ 88888">
          <template slot="show">
            <!-- 柱状图 -->
            <div nav-show>
              <barchart />
            </div>
          </template>
          <template slot="hide">
            <div>日销售额￥ 88888</div>
          </template>
        </nav-card>
      </el-col>
      <!-- 第四栏 -->
      <el-col :span="6">
        <nav-card title="销售总额" count="￥ 88888">
          <template slot="show">
            <div nav-show>
              <ProgressChart />
            </div>
          </template>
          <template slot="hide">
            <div>日销售额￥ 88888</div>
          </template>
        </nav-card>
      </el-col>
    </el-row>
    <!-- 内容 -->
    <Sale class="sale" />
    <!-- 底部 -->
    <el-card />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavCard from './navcard/index.vue'
// 折线图组件
import LineChart from './lineChart/index.vue'
// 条形图组件
import Barchart from './barChart/barchart.vue'
// 进度条组件
import ProgressChart from './progressChart/index.vue'
import Sale from './Sale/index.vue'

export default {
  name: 'Dashboard',
  // import引入的组件需要注入到对象中才能使用
  components: { NavCard, LineChart, Barchart, ProgressChart, Sale },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="less" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.nav-show{
  width: 100%;
  height: 50px;
}
</style>
